<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Electman - Electrician HTML Template | Home Page 02</title>
<!-- Stylesheets -->
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<!-- Color File -->
<link href="css/color.css" rel="stylesheet">
<!-- Responsive File -->
<link href="css/responsive.css" rel="stylesheet">
<link href="css/index.css" rel="stylesheet">
<link href="css/login-style.css" rel="stylesheet">


<link rel="shortcut icon" href="images/favicon.png" type="image/x-icon">
<link rel="icon" href="images/favicon.png" type="image/x-icon">

<!-- Responsive Settings -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<!--[if lt IE 9]><script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"></script><![endif]-->
<!--[if lt IE 9]><script src="js/respond.js"></script><![endif]-->
</head>

<body>

<div class="page-wrapper" id="app">
    <!-- Preloader -->
    <div class="preloader"><div class="icon"></div></div>

 <!-- Main Header -->
    <header class="main-header header-style-one inner-page-header">
        <!-- Header Top -->
        <div class="header-top header-top-one">
            <div class="auto-container">
				<div class="inner clearfix">
                    <div class="top-left clearfix">
                        <div class="top-text">We are Open Everyday at 09:00 am - 10:00 pm</div>
                    </div>
    
                    <div class="top-right clearfix">
                        <div class="email">
                            <a href="mailto:support@domain.com">Email: ourcomply@mail.com</a>
                        </div>
                        <ul class="social-links clearfix">
                            <li><a href="#"><span class="fab fa-twitter"></span></a></li>
                            <li><a href="#"><span class="fab fa-facebook-f"></span></a></li>
                            <li><a href="#"><span class="fab fa-instagram"></span></a></li>
                            <li><a href="#"><span class="fab fa-linkedin-in"></span></a></li>
                            <li><a href="#"><span class="fab fa-pinterest-p"></span></a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>

        <!-- Header Upper -->
        <div class="header-main-box">
            <div class="auto-container">
                <div class="inner-container">
                    <div class="upper-row clearfix">
                        <!--Logo-->
                        <div class="logo-box">
                            <div class="logo"><a href="index.html" title="Electman - Electrician HTML Template">
							<img src="images/logo.png" alt="Electman - Electrician HTML Template" title="Electman - Electrician HTML Template">
							
							
							</a></div>
                        </div>
                        <div class="right-info clearfix">
                            <!--Info-->
                            <div class="info clearfix">
                                <!--Info Block-->
                                <div class="info-block">
                                    <div class="icon-box">
                                        <span class="icon">
                                            <img src="images/icons/icon-call-1.png" alt="">
                                        </span>
                                    </div>
                                    <strong>Toll Free Call</strong>
                                    <div class="info-text">
                                        <a href="#">(+357) 964587</a>
                                    </div>
                                </div>
                                
                            </div>
                            <!--Link Box-->
                            <div class="link-box">
                                <a href="contact.html" class="theme-btn btn-style-one"><div class="btn-title"><span class="btn-txt">Free Consultation</span><span class="btn-icon"><span class="icon flaticon-arrows-11"></span> </span></div></a>
                            </div>
                        </div>
                        
                    </div>
                </div>
            </div>
        </div>
        <!--End Header Upper-->
        <el-row>
            <div class="content">
                <div class="form sign-in">
                    <h2>欢迎回来</h2>
                    <label>
                        <span>邮箱</span>
                        <input type="email" v-model="username"/>
                    </label>
                    <label>
                        <span>密码</span>
                        <input type="password" v-model="password"/>
                    </label>
                    <p class="forgot-pass"><a href="javascript:">忘记密码？</a></p>
                    <button type="button" class="submit" @click="login">登 录</button>
                    <button type="button" class="fb-btn">使用 <span>facebook</span> 帐号登录</button>
                </div>
                <div class="sub-cont">
                    <div class="img">
                        <div class="img__text m--up">
                            <h2>还未注册？</h2>
                            <p>立即注册，发现大量机会！</p>
                        </div>
                        <div class="img__text m--in">
                            <h2>已有帐号？</h2>
                            <p>有帐号就登录吧，好久不见了！</p>
                        </div>
                        <div class="img__btn" @click="pagechange">
                            <span class="m--up">注 册</span>
                            <span class="m--in">登 录</span>
                        </div>
                    </div>
                    <div class="form sign-up">
                        <h2>立即注册</h2>
                        <label>
                            <span>用户名</span>
                            <input type="text" />
                        </label>
                        <label>
                            <span>邮箱</span>
                            <input type="email" />
                        </label>
                        <label>
                            <span>密码</span>
                            <input type="password" />
                        </label>
                        <button type="button" class="submit">注 册</button>
                        <button type="button" class="fb-btn">使用 <span>facebook</span> 帐号注册</button>
                    </div>
                </div>
            </div>
        </el-row>
        
                
        

        <!-- Sticky Header  -->
        <div class="sticky-header">
            <div class="auto-container clearfix">
                <!--Logo-->
                <div class="logo pull-left">
                    <a href="index.html" title=""><img src="images/logo_small.png" alt="" title=""></a>
                </div>
                <!--Right Col-->
                <div class="pull-right">
                    <!-- Main Menu -->
                    <nav class="main-menu clearfix">
                        <!--Keep This Empty / Menu will come through Javascript-->
                    </nav><!-- Main Menu End-->
                </div>
            </div>
        </div><!-- End Sticky Menu -->

        <!-- Mobile Menu  -->
        <div class="mobile-menu">
            <div class="menu-backdrop"></div>
            <div class="close-btn"><span class="icon flaticon-cancel"></span></div>
            
            <nav class="menu-box">
                <div class="nav-logo"><a href="index.html"><img src="images/nav-logo.png" alt="" title=""></a></div>
                <div class="menu-outer"><!--Here Menu Will Come Automatically Via Javascript / Same Menu as in Header--></div>
				<!--Social Links-->
				<div class="social-links">
					<ul class="clearfix">
						<li><a href="#"><span class="fab fa-twitter"></span></a></li>
						<li><a href="#"><span class="fab fa-facebook-square"></span></a></li>
						<li><a href="#"><span class="fab fa-pinterest-p"></span></a></li>
						<li><a href="#"><span class="fab fa-instagram"></span></a></li>
						<li><a href="#"><span class="fab fa-youtube"></span></a></li>
					</ul>
                </div>
            </nav>
        </div><!-- End Mobile Menu -->
    </header>
    <!-- End Main Header -->

    <!--Search Popup-->
    <div id="search-popup" class="search-popup">
        <div class="close-search theme-btn"><span class="flaticon-cancel"></span></div>
        <div class="popup-inner">
            <div class="overlay-layer"></div>
            <div class="search-form">
                <form method="post" action="index.html">
                    <div class="form-group">
                        <fieldset>
                            <input type="search" class="form-control" name="search-input" value="" placeholder="Search Here" required >
                            <input type="submit" value="Search Now!" class="theme-btn">
                        </fieldset>
                    </div>
                </form>
                
                <br>
                <h3>Recent Search Keywords</h3>
                <ul class="recent-searches">
                    <li><a href="#">Finance</a></li>
                    <li><a href="#">Idea</a></li>
                    <li><a href="#">Service</a></li>
                    <li><a href="#">Growth</a></li>
                    <li><a href="#">Plan</a></li>
                </ul>
            
            </div>
            
        </div>
    </div>

  <!-- Main Footer / Style Five-->
    <footer class="main-footer footer-style-five">

        <!--Widgets Section-->
        <div class="widgets-section">
            <div class="auto-container">
                <div class="row clearfix">
                    
                    <!--Column-->
                    <div class="footer-column col-lg-4 col-md-5 col-sm-12">
                        <div class="footer-widget about-widget">
                            <div class="footer-logo-box">
                                <a href="index.html" title="Electman - Electrician HTML Template"><img src="images/logo2.png" alt="" title=""></a>
                            </div>
                            <div class="about-text">Integer lobortis sem consequat imperdiet In nulla viverra ut lorem ut, dapibus conse etur diam. Nun bibendum diet condiment sed ipsum duis lacinia.</div>
                            <div class="footer-social">
                                <ul class="footer-social-two clearfix">
                                    <li><a href="#"><span class="fab fa-twitter"></span></a></li>
                                    <li><a href="#"><span class="fab fa-facebook-f"></span></a></li>
                                    <li><a href="#"><span class="fab fa-instagram"></span></a></li>
                                    <li><a href="#"><span class="fab fa-linkedin-in"></span></a></li>
                                    <li><a href="#"><span class="fab fa-pinterest-p"></span></a></li>
                                </ul>
                            </div>
                        </div>
                    </div>

                    <!--Column-->
                    <div class="big-column col-lg-5 col-md-7 col-sm-12">
                        <div class="row clearfix">
                            <!--Column-->
                            <div class="footer-column col-lg-6 col-md-6 col-sm-12">
                                <div class="footer-widget links-widget">
                                    <div class="widget-title">
                                        <h3>Quick Links</h3>
                                    </div>
                                    <div class="widget-content">
                                        <ul>
                                            <li><a href="#">About Electman</a></li>
                                            <li><a href="#">News Blog</a></li>
                                            <li><a href="#">Careers</a></li>
                                            <li><a href="#">Case Studies</a></li>
                                            <li><a href="#">Meet Our Team</a></li>
                                            <li><a href="#">Testimonials</a></li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                            
                            <!--Column-->
                            <div class="footer-column col-lg-6 col-md-6 col-sm-12">
                                <div class="footer-widget links-widget">
                                    <div class="widget-title">
                                        <h3>Our Services</h3>
                                    </div>
                                    <div class="widget-content">
                                        <ul>
                                            <li><a href="#">Installation & Monitoring</a></li>
                                            <li><a href="#">After Sales Service</a></li>
                                            <li><a href="#">Free Replacemrnt</a></li>
                                            <li><a href="#">Warrenty Claims</a></li>
                                            <li><a href="#">Energy Equipments</a></li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!--Column-->
                    <div class="footer-column col-lg-3 col-md-12 col-sm-12">
                        <div class="footer-widget gallery-widget">
                            <div class="widget-title">
                                <h3>Contact Us</h3>
                            </div>
                            <div class="info">
                                <!--Info Block-->
                                <div class="info-block">
                                    <div class="icon-box">
                                        <span class="icon">
                                            <img src="images/icons/icon-message-1.png" alt="">
                                        </span>
                                    </div>
                                    <strong>Visit The Office</strong>
                                    <div class="info-text">102 Taily End Rd, NY</div>
                                </div>
                                <!--Info Block-->
                                <div class="info-block">
                                    <div class="icon-box">
                                        <span class="icon">
                                            <img src="images/icons/icon-call-1.png" alt="">
                                        </span>
                                    </div>
                                    <strong>Phone Inquiry</strong>
                                    <div class="info-text">
                                        <a href="tel:(222)-303-4500">(222) 303 4500</a>
                                    </div>
                                </div>
                                <!--Info Block-->
                                <div class="info-block">
                                    <div class="icon-box">
                                        <span class="icon">
                                            <img src="images/icons/icon-mail-1.png" alt="">
                                        </span>
                                    </div>
                                    <strong>Send Email</strong>
                                    <div class="info-text">
                                        <a href="mailto:info@domain.com">info@domain.com</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
					
					
                    
                </div>
				<div class="nav-box clearfix">
                	<div class="inner clearfix">
                    	<ul class="footer-nav clearfix">
                        	<li><a href="#">Home</a></li>
                            <li><a href="#">About</a></li>
                            <li><a href="#">Gallery</a></li>
                            <li><a href="#">Service</a></li>
                            <li><a href="#">Blog</a></li>
                            <li><a href="#">Contact</a></li>
                        </ul>
                        
						<div class="footer_bttn">
                            <a href="contact.html" class="theme-btn btn-style-seven"><div class="btn-title"><span class="btn-txt">Contact Us</span><span class="btn-icon"><span class="icon flaticon-arrows-11"></span> </span></div></a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- Footer Bottom -->
        <div class="footer-bottom">
            <div class="auto-container">

                <div class="inner clearfix">
                    <!--Scroll to top-->
                    <div class="scroll-top-footer scroll-to-target" data-target="html"><span class="flaticon-arrows"></span></div>
                    <!--Copyright-->
                    <div class="copyright">Copyright (c) 2020. All rights <a href="http://www.bootstrapmb.com" title="">reserved</a>.</div>
                    <div class="footer-nav">
                        <ul class="clearfix">
                            <li><a href="#">Privacy Policy</a></li>
                            <li><a href="#">Sitemap</a></li>
                            <li><a href="#">Terms & Conditions</a></li>
                        </ul>
                    </div>
                </div>
                
            </div>
        </div>
        
    </footer>

</div>
<!--End pagewrapper-->

<script src="js/jquery.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery-ui.js"></script>
<script src="js/jquery.fancybox.js"></script>
<script src="js/owl.js"></script>
<script src="js/appear.js"></script>
<script src="js/wow.js"></script>
<script src="js/scrollbar.js"></script>
<script src="js/validate.js"></script>
<script src="js/paroller.js"></script>
<script src="js/element-in-view.js"></script><script src="js/custom-script.js"></script>
<script src="js/vue.js"></script>
<script src="js/index.js"></script>
<script src="js/axios.js"></script>

</body>
<script>
    var vm = new Vue({
        el: '#app',
        data() {
            return {
                timer: '',
                loginFlag: true,
                registryFlag: false,
                num: 10,
                account: {
                    username: String,
                    password: String
                }
                
            }
        },
        methods: {
            pagechange: () => {
                document.querySelector('.content').classList.toggle('s--signup');
            },
            login: () => {
                axios.post('',account).then(res => {
                    
                });
            }
        },
        mounted() {
            this.timer = setInterval(this.changeImage, 5000);
        },
        beforeDestroy() {
            clearInterval(this.timer);
        },
    });
</script>
</html>